<!DOCTYPE html>
<html>
	<head>
		<title>Timer</title>
		<script src="http://fb.me/react-0.12.2.js"></script>
		<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
	</head>
	<body>
		<div id="content"></div>
		<script type="text/jsx">

			var Timer = React.createClass({
				getInitialState: function() {
					return {secondsElapsed: 0};
				},
				tick: function() {
					this.setState({secondsElapsed: this.state.secondsElapsed + 1});
				},
				componentDidMount: function() {
					this.interval = setInterval(this.tick, 1000);
				},
				componentWillUnmount: function() {
					clearInterval(this.interval);
				},
				render: function() {
					return (
						<h1>Seconds Elapsed: {this.state.secondsElapsed}</h1>
					);
				}
			});

			React.render(
				<Timer />, 
				document.getElementById('content')
			);

		</script>
	</body>
</html>